<template>
  <div>
    <el-button link type="primary" :disabled="disabled" @click="handleClick">
      <div class="block-btn">{{ value ? value : '请输入参数' }}</div>
    </el-button>
    <el-dialog v-if="dialogShow" v-model="dialogShow" :title="title" width="500px" append-to-body :before-close="handleClose">
      <el-input v-model="inputVal" type="textarea" />
      <div class="tips">注：填写示例：[1,2,3;4,5,6;7,8,9]</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSure">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="VersionBasicForm" lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const prop = defineProps({
  modelValue: String,
  type: String,
  title: {
    type: String,
    default: '输入参数'
  }
});
const emit = defineEmits(['update:modelValue', 'on-change']);
const value = ref('');
const inputVal = ref('');
const dialogShow = ref(false);
const disabled = ref(false);
const handleClick = () => {
  inputVal.value = value.value;
  dialogShow.value = true;
};
const handleSure = () => {
  if (!inputVal.value) {
    proxy?.$modal.msgError('请输入参数');
    return false;
  }
  value.value = inputVal.value;
  emit('update:modelValue', value.value);
  emit('on-change');
  dialogShow.value = false;
};
const handleClose = () => {
  dialogShow.value = false;
};
watch(
  () => prop.modelValue,
  () => {
    if (prop.modelValue) {
      value.value = prop.modelValue;
    }
  }
);
onMounted(() => {
  if (prop.modelValue) {
    value.value = prop.modelValue;
  } else {
    value.value = '';
  }
  if (prop.type === 'view' || prop.type === 'complate') {
    disabled.value = true;
  } else {
    disabled.value = false;
  }
});
</script>

<style lang="scss" scoped>
.block-btn {
  font-size: 12px;
  width: 260px;
  text-align: left;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示超出的文本 */
}
</style>
